<template>
  <tui-bottom-popup  :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
    <view class="header">发红包</view>
    <view v-if="detail" class="content">
      <view class="item">
        <image class="item-image" src="@/static/images/qywork/hongbao.png" mode=""></image>
        <view class="item-info">
          <view class="item-title">{{detail.title}}</view>
          <view class="item-price">￥{{detail.min_money}}~{{detail.max_money}}</view>
          <view class="item-tips">余额：{{detail.total_money}}元</view>
          <view class="item-tips">可用次数：{{detail.max_claim_times}}次</view>
        </view>
        <!-- <view class="item-btn">
          <view class="btn">发送</view>
        </view> -->
      </view>
      <view class="row">
        <view class="label">红包个数</view>
        <input class="input" v-model="count" placeholder="请输入红包个数" placeholder-style="color:#ccc" />
        <view>个</view>
      </view>
      <view class="tips">本次预计发出{{Number(detail.min_money).toFixed(2)}}~{{Number(detail.max_money).toFixed(2)}}元</view>
    </view>
    <view class="footer">
      <tui-button type="primary" width="288rpx" height="72rpx" plain @click="hiddenPopup">取消</tui-button>
      <tui-button type="primary" width="288rpx" height="72rpx" @click="handleSubmit">发送</tui-button>
    </view>
  </tui-bottom-popup>
</template>

<script>
import { sendChatMessage } from '../../../common/wxCodeAuth';

export default {
  data() {
    return {
      popupShow: false,
      detail: null,
      count: 1,
      // 会话ID
      id: ''
    }
  },
  methods: {
    showPopup(value, id) {
      this.detail = value
      // this.count = value.total_count
      this.id = id
      this.popupShow = true;
    },
    hiddenPopup() {
      this.popupShow = false;
      this.$emit('close');
    },
    handleSubmit() {
      const params = {
        red_id: this.detail.id,
        send_num: this.count,
      }
      if(this.detail.is_group == 1) {
        params.chat_id = this.id
      } else {
        params.external_userid = this.id
      }
      this.tui.requestQywork("/work/red-package/share", "POST", params, false, true, false).then((res) => {
        if(res.code != 1) {
          this.tui.toast(res.msg)
          return
        }
        sendChatMessage(3, {
          link:  'https://' + window.location.hostname+`/pages/index/receive?red_id=${res.data.red_id}&send_id=${res.data.send_id}`,
          title: this.detail.title,
          desc: this.detail.share_desc,
          imgUrl: 'http://static.fastht.com/c7859c1f1fa5d97f/e9b4dd7546227074.png',
        }).then(res => {
          this.$emit('change')
          this.popupShow = false;
        })
      }).catch((res) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  padding: 30rpx;
  text-align: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.content {
  padding: 0 40rpx;
  .item {
    padding: 20rpx 32rpx;
    background-color: #FDF8F4;
    display: flex;
    align-items: center;
    border-radius: 16rpx;
    margin-bottom: 20rpx;

    .item-image {
      width: 78rpx;
      height: 84rpx;
    }

    .item-info {
      flex: 1;
      overflow: hidden;
      margin-left: 20rpx;
      line-height: 34rpx;
      font-size: 26rpx;
    }

    .item-price {
      margin-top: 10rpx;
    }
    .item-tips {
      margin-top: 10rpx;
      color: #9E9E9E;
    }

    .item-btn {
      border-left: 1px solid #F4E6E0;
      height: 152rpx;
      padding-left: 32rpx;
      display: flex;
      align-items: center;

      .btn {
        width: 130rpx;
        height: 56rpx;
        border-radius: 8rpx;
        background: linear-gradient(90deg, #FA2C19, #FA3F19, #FA5919, #FA6419);
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .row {
    display: flex;
    height: 100rpx;
    align-items: center;
    border-bottom: 1px solid #EDEDED;

    .label {
      color: #828282;
      font-size: 30rpx;
      &::before {
        content: "*";
        color: #FA2C19;
        padding-right: 10rpx;
      }
    }

    .input {
      flex: 1;
      text-align: right;
      height: 100%;
      padding-right: 10rpx;
      font-size: 30rpx;
    }
  }
  .tips {
    text-align: right;
    padding: 40rpx 0;
    color: #828282;
    font-size: 30rpx;
  }
}
.footer {
  padding: 24rpx 30rpx;
  display: flex;
  box-shadow: 0 -6rpx 8rpx 0 rgba(0, 0, 0, 0.08);
  justify-content: space-around;

 
  ::v-deep .tui-btn-primary {
    background: linear-gradient(90deg, #FA2C19, #FA3F19, #FA5919, #FA6419) !important;
  }
  ::v-deep .tui-primary-outline {
    color: #9E9E9E !important;
    &::after {
      border-color: #969696 !important;

    }
  }
}
</style>
